{%extends "base.html"%}

{%block style%} <link rel="stylesheet" type="text/css" href="/stylesheets/viewVideoStyle.css" />{%endblock%}

{%block breadcrumbs%}<div id="middleBreadcrumb">
                            <a href="/home/">home</a> >
                       </div>
                       <div id="middleBreadcrumb">
                            <a href="/course/{{course.code}}/{{group.code}}/">{{course.name}}</a> >
                       </div>
                       <div id="middleBreadcrumb">
                           <a href="/viewVideoMenu/{{course.code}}/{{group.code}}/">videos</a> >
                       </div>
                       <div id="lastBreadcrumb">
                           {{video.title}}
                       </div>

{%endblock%}

{%block cuerpo%}
<script type="text/javascript" src="/flowplayer/flowplayer.js"></script>
<div id="video_container">
<div id="video_title">
    <p>
        {{video.title}}
    </p>
</div>
<!-- player container. display:block not needed-->
<div id="player"></div>
<!-- this script block will install Flowplayer inside previous DIV tag -->
<script language="JavaScript">
    flowplayer(
        "player",
        "/flowplayer/flowplayer-3.0.7.swf",
        "/videos/{{fileName}}"
    );
</script>

<br />
<div id="video_description">{{video.description}}</div>
<br />
</div>
{%endblock%}
